import React from 'react';
import PropTypes from 'prop-types';

import Box from '../box/box.jsx';
import Alert from '../../containers/alert.jsx';
import styles from './alerts.css';

const AlertsComponent = ({
    alertsList,
    className,
    onCloseAlert
}) => {
    return (
    <Box bounds="parent" className={className} >
        <Box className={styles.alertsInnerContainer} >
            {alertsList.map((a, index) => (
                <Alert
                    closeButton={a.closeButton}
                    content={a.content}
                    level={a.level}
                    icon={a.icon}
                    onCloseAlert={onCloseAlert}
                    

                    index={index}
                    key={index}

                    extensionId={a.extensionId}
                    extensionName={a.extensionName}
                    message={a.message}
                    showReconnect={a.showReconnect}
                />
            ))}
        </Box>
    </Box>
)};

AlertsComponent.propTypes = {
    alertsList: PropTypes.arrayOf(PropTypes.object),
    className: PropTypes.string,
    onCloseAlert: PropTypes.func
};

export default AlertsComponent;





// const AlertsComponent = ({
//     alertsList,
//     className,
//     onCloseAlert
// }) => (
//     <Box
//         bounds="parent"
//         className={className}
//     >
//         <Box className={styles.alertsInnerContainer} >
//             {alertsList.map((a, index) => (
//                 <Alert
//                     closeButton={a.closeButton}
//                     content={a.content}
//                     extensionId={a.extensionId}
//                     extensionName={a.extensionName}
//                     iconSpinner={a.iconSpinner}
//                     iconURL={a.iconURL}
//                     index={index}
//                     key={index}
//                     level={a.level}
//                     message={a.message}

//                     showReconnect={a.showReconnect}
//                     onCloseAlert={onCloseAlert}
//                 />
//             ))}
//         </Box>
//     </Box>
// );
